<template>
    <CrudPage
        :getApi="getGoodsApi"
        :deleteApi="deleteGoodsApi"
        :columns="columns"
        :scrollX="2900"
        :onCreate="() => $router.replace({ name: 'createAndEditGoods' })"
        :pagination="true"
        ref="crudRef"
        :page="page"
        :pageSize="pageSize"
        addText="添加商品"
        v-model:filterFormData="filterFormData"
        :scroll="true"
    >
        <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'goods_img'">
                <AImage width="40" height="40" :src="`${baseUrl}${record.goods_img}`" />
            </template>
        </template>
        <template #filter>
            <AFormItem name="title" label="商品名">
                <AInput :allowClear="true" v-model:value="filterFormData.title" placeholder="请输入商品名" />
            </AFormItem>
        </template>
    </CrudPage>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from "vue";
import { getGoodsApi, Goods, GoodsCate, deleteGoodsApi } from "@/api/goods";
import CrudPage from "@/components/CrudPage.vue";
import { useRoute, useRouter } from "vue-router";
export default defineComponent({
    components: {
        CrudPage,
    },
    setup() {
        const router = useRouter();
        const route = useRoute();
        const crudRef = ref();
        const columns = [
            { dataIndex: "title", title: "商品名", width: 20, fixed: "left" },
            { dataIndex: "sub_title", title: "副标题", width: 20 },
            { dataIndex: "goods_sn", title: "商品编码", width: 10 },
            // { dataIndex: "cate_id", title: "分类", width: 10 },
            {
                dataIndex: "cate",
                title: "分类",
                customRender({ text }: { text: GoodsCate }) {
                    return text?.title;
                },
                width: 14,
            },
            { dataIndex: "click_count", title: "点击量", width: 10 },
            { dataIndex: "goods_number", title: "库存", width: 10 },
            { dataIndex: "shop_price", title: "商品价", width: 10 },
            { dataIndex: "market_price", title: "市场价", width: 10 },
            { dataIndex: "relation_goods", title: "关联商品", width: 10 },
            { dataIndex: "goods_attrs", title: "商品属性", width: 10 },
            { dataIndex: "goods_version", title: "版本", width: 10 },
            { dataIndex: "goods_img", title: "图片", width: 10 },
            { dataIndex: "goods_gift", title: "赠品", width: 10 },
            { dataIndex: "goods_fitting", title: "关联配件", width: 10 },
            { dataIndex: "goods_color", title: "商品颜色", width: 10 },
            { dataIndex: "goods_keywords", title: "关键字", width: 10 },
            { dataIndex: "goods_desc", title: "描述", width: 10 },
            // { dataIndex: "goods_content", title: "内容", width: 10 },
            { dataIndex: "sort", title: "排序号", width: 10 },
            // { dataIndex: "is_delete", title: "商品名", width: 10 },
            { dataIndex: "is_hot", title: "热卖", width: 10, customRender: ({ text }: { text: number }) => (text ? "是" : "否") },
            { dataIndex: "is_best", title: "精品", width: 10, customRender: ({ text }: { text: number }) => (text ? "是" : "否") },
            { dataIndex: "is_new", title: "新品", width: 10, customRender: ({ text }: { text: number }) => (text ? "是" : "否") },
            { dataIndex: "goods_type_id", title: "类型", width: 10 },
            { dataIndex: "status", title: "状态", width: 10, customRender: ({ text }: { text: number }) => (text ? "可用" : "不可用") },
            { dataIndex: "_id", title: "ID", width: 0, ellipsis: true },
            {
                dataIndex: "operation",
                title: "操作",
                width: 20,
                fixed: "right",
                onEdit({ record }: { record: Goods }) {
                    const {
                        paginationConfig: { page, pageSize },
                    } = crudRef.value;
                    router.replace({ name: "createAndEditGoods", query: { _id: record._id as string, page, pageSize } });
                },
            },
        ];
        const state = reactive<{ page: undefined | number; pageSize: undefined | number; filterFormData: { title: string } }>({
            page: undefined,
            pageSize: undefined,
            filterFormData: {
                title: "",
            },
        });
        const initPagination = () => {
            const { page, pageSize } = route.query;
            if (page && pageSize) {
                state.page = +page;
                state.pageSize = +pageSize;
            }
        };
        initPagination();
        return {
            columns,
            getGoodsApi,
            deleteGoodsApi,
            baseUrl: process.env.VUE_APP_BASEURL,
            crudRef,
            ...toRefs(state),
        };
    },
});
</script>

<style scoped lang="scss"></style>
